<template>
  <div id="Subtraction">
<!--    <h1>当前最新的count值是:{{count}}</h1>-->
    <h1>{{showNum}}</h1>
    <button @click="sub">-1</button>
    <button @click="subHandler">-4</button>
    <button @click="subAsync">-1 Async</button>
    <button @click="subHandler2">-N Async</button>


  </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"Subtraction",
computed: {
    ...mapState(['count']),
  ...mapGetters(['showNum'])
},
methods: {
    ...mapMutations(['sub','subN']),
  ...mapActions(['subAsync','suNasync']),
    subHandler(){
        this.subN(4)
    },
  subHandler2(){
      // 执行mutations中的异步函数
      this.suNasync(5)
  }
},
}
</script>

<style>

</style>